<template>
  <div>
    <h1>欢迎来到主页</h1>
    <p class="subtitle">手机排行榜</p>

    <div class="search-container">
      <input v-model="searchQuery" type="text" placeholder="输入手机名称进行搜索" @keydown.enter="searchPhones">
      <button @click="searchPhones">搜索</button>
    </div>

    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-else>
      <div v-for="phone in paginatedPhones" :key="phone.product_id" class="phone-card">
        <p class="phone-rank">排名: {{ phone.rank }}</p>
        <p class="phone-title" @click="goAbout(phone.product_id)">{{ phone.title }}</p>
        <p class="phone-detail">产品名称: {{ phone.product_name }}</p>
        <p class="phone-detail">品牌: {{ phone.brand }}</p>
      </div>

      <!-- 分页控件 -->
      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1" class="page-button">上一页</button>
        <span class="page-info">Page {{ currentPage }} of {{ totalPages }}</span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="page-button">下一页</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchPage',
  data() {
    return {
      isLoading: true,
      phones: [],
      searchQuery: '', // 新增搜索查询数据
      currentPage: 1,
      pageSize: 5, // 每页显示的条数
    };
  },

  computed: {
    totalPages() {
      return Math.ceil(this.phones.length / this.pageSize);
    },
    paginatedPhones() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.phones.slice(start, end);
    }
  },

  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        window.scrollTo(0, 0);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        window.scrollTo(0, 0);
      }
    },
    goAbout(product_id) {
      this.$router.push(`/about?product_id=${product_id}`);
    },
    searchPhones() {
      this.currentPage = 1; // 搜索时将页面重置为第一页
      this.isLoading = true;
      fetch('http://127.0.0.1:5000/search', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ product_name: this.searchQuery })
      })
          .then(response => response.json())
          .then(data => {
            if (data.code === 200) {
              this.phones = data.data;
            } else {
              console.error('Failed to fetch data:', data.message);
            }
            this.isLoading = false;
          })
          .catch(error => {
            console.error('Error fetching data:', error);
            this.isLoading = false;
          });
    }
  },

  mounted() {
    fetch('http://127.0.0.1:5000/rank')
        .then(response => response.json())
        .then(data => {
          if (data.code === 200) {
            this.phones = data.data;
            console.log(data);
          } else {
            console.error('Failed to fetch data:', data.message);
          }
          this.isLoading = false;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
          this.isLoading = false;
        });
  },
};

</script>

<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.loading {
  text-align: center;
  font-size: 24px;
  color: #3498db;
}

h1 {
  color: #333;
  margin-top: 20px;
}

.search-container {
  position: absolute;
  top: 30px;
  right: 10px;
  display: flex;
}

.search-container input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

.search-container button {
  padding: 10px 20px;
  background-color: #34495e;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-container button:hover {
  background-color: #1abc9c;
}

.phone-card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
}

.phone-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.phone-title {
  font-size: 18px;
  font-weight: bold;
  color: #3498db;
  cursor: pointer;
}

.phone-title:hover {
  text-decoration: underline;
}

.phone-rank {
  font-size: 1.2em;
  font-weight: bold;
  color: #666666;
  padding: 5px 5px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 5px;
  display: inline-block;
}



.phone-detail {
  margin: 5px 0;
  color: #555;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.page-button {
  background-color: #34495e;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.page-button:not(:disabled):hover {
  background-color: #1abc9c;
}

.page-info {
  font-size: 16px;
  color: #555;
}

.subtitle {
  font-size: 20px;
  font-weight: bold;
  color: #555;
  margin-top: 10px;
}
</style>
